<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tvue</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="hello-vue" >
  <div v-if="roomList" class="container" >
  <div class="row" >
    <div class="col-sm-10 col-8"></div>
    <div class="col-sm-2 col-4">
      <button class="btn btn-secondary" id="bt1" onclick="sm(3453)">update</button>
    </div>
  </div>
  <table class="table" >
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th class="text-right" >Occupation</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in people" :key="person.id">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td class="text-right" ><button @click = "handC( person.name )" class="btn btn-secondary" > BT  </button> </td>
      </tr>
    </tbody>
  </table>
  </div>
  <div v-if="room" class="container" >
    <button class="btn btn-secondary" @click = "leaveRoom() ">退出</button>
    <p>players</p>

  </div>
</div>

<script>
  window.mydata = "mydata is init in window";
const HelloVueApp = {
  data(){
    return {
      message: 'Hello Vue!!' ,
      roomList: true,
      room: false,
      people:[
        {name:1,age:2,occupation:3},
        {name:4,age:5}
      ]

    }
  },
  methods:{
    sm(m){
      alert(m);
    },
    handC(name){
      alert(window.mydata);
      this.roomList = false;
      this.room = true;
      this.people.push({name:name,age:-1});
      this.post("/getRooms",{name:123})
        .then(res => res.text())
        .then(data => {console.log(data);})
        .catch(e => console.log(e));
    },
    leaveRoom(){
      this.room = false;
      this.roomList = true;
    },
    post(url,data){
      var host = "http://"+ window.location.host + "";
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");
      var raw = JSON.stringify(data);
      console.log("row" + raw);
      var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
      };
        return fetch(host + url , requestOptions);
    }
  }
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>
